<template>
    <el-container direction='vertical'>
        <AppHeader/>
        <el-container id="mainContainer" class="mainContainer">
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import AppHeader from '../components/Header'
export default {
    components: { AppHeader },
    mounted(){
        document.getElementById('mainContainer').style.height = document.documentElement.clientHeight - document.querySelector('.el-header').clientHeight + 'px'
        window.onresize = () => {
            document.getElementById("app").style.height = document.documentElement.clientHeight + "px";
            document.getElementById('mainContainer').style.height = document.documentElement.clientHeight - document.querySelector('.el-header').clientHeight + 'px'
        };
    }
}
</script>
<style lang="less" scoped>
.el-main {
    background-color: #f8f8f8;
    width: 100%;
    padding-top: 0;
    padding-right: 0;
    padding-left: 11px;
    padding-bottom: 0;
}
.el-main::-webkit-scrollbar {
    display:none;
}
.el-container{
    height: 100%;
}

</style>
